<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="cu-form-group">
			<view class="title">选择银行</view>
			<picker @change="bankChange" :value="index" :range="bankList" range-key="bankName">
				<view class="picker">
					<view class="flex justify-end align-center" v-if="index > -1">
						<image :src="`/static/images/bank/${bankList[index].bankCode}.png`"></image>
						<view class="margin-left-xs">{{bankList[index].bankName}}</view>
					</view>
					<view v-else>
						请选择
					</view>
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">银行账号</view>
			<input type="text" placeholder="填写银行卡 / 支付宝微信账号" v-model="bankData.cardCode" />
		</view>
		<view class="cu-form-group">
			<view class="title">持卡姓名</view>
			<input type="text" maxlength="4" placeholder="持账户人姓名" v-model="bankData.username" />
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input type="number" maxlength="11" placeholder="持账户人手机号" v-model="bankData.mobile" />
		</view>
		<view class="padding-bj flex flex-direction margin-top">
			<button @tap="confirm" class="cu-btn wanl-bg-orange lg" :disabled="!checked">完成</button>
		</view>


		<!-- 同意服务条款 -->
		<checkbox-group class="auth-clause" @change="CheckboxChange">
			<checkbox class="orange" :class="checked ? 'checked' : ''" :checked="checked ? true : false" value="agree" />
			<view class="auth-clause-text">
				我已阅读<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议',checked_01)">用户协议</text>及<text @tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护',checked_02)">隐私权保护声明</text>
			</view>
		</checkbox-group>

		<wanl-agree ref="wanl_agree" @agree="onAgree"></wanl-agree>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankData: {
					username: '',
					mobile: '',
					bankCode: '',
					bankName: '',
					cardCode: ''
				},
				index: -1,
				bankList: [
					{ bankCode: 'ALIPAY', bankName: '支付宝账户' },
					{ bankCode: 'WECHAT', bankName: '微信账户' },
					{ bankCode: 'ICBC', bankName: '工商银行' },
					{ bankCode: 'ABC', bankName: '农业银行' },
					{ bankCode: 'PSBC', bankName: '邮储银行' },
					{ bankCode: 'CCB', bankName: '建设银行' },
					{ bankCode: 'CMB', bankName: '招商银行' },
					{ bankCode: 'BOC', bankName: '中国银行' },
					{ bankCode: 'COMM', bankName: '交通银行' },
					{ bankCode: 'SPDB', bankName: '浦发银行' },
					{ bankCode: 'GDB', bankName: '广发银行' },
					{ bankCode: 'CMBC', bankName: '民生银行' },
					{ bankCode: 'PAB', bankName: '平安银行' },
					{ bankCode: 'CEB', bankName: '光大银行' },
					{ bankCode: 'CIB', bankName: '兴业银行' },
					{ bankCode: 'CITIC', bankName: '中信银行' }
				],

				checked_01: false,
				checked_02: false,
			}
		},
		computed: {
			checked: function() {
				if (this.checked_01 && this.checked_02) return true
				return false
			},
			getSubmitDisabled: function() {
				if (!this.checked) return true
				return false
			}
		},
		mounted() {
			setTimeout(() => {
				if (this.$store.state.common.appConfig.user_agreement) {
					this.onDetails(this.$store.state.common.appConfig.user_agreement, '用户协议', this.checked_01)
				} else {
					setTimeout(() => {
						this.onDetails(this.$store.state.common.appConfig.user_agreement, '用户协议', this.checked_01)
					}, 2000)
				}
			}, 1000)
		},
		methods: {
			CheckboxChange(e) {
				if (e.detail.value.length) {
					this.checked_01 = true
					this.checked_02 = true
				} else {
					this.checked_01 = false
					this.checked_02 = false
				}
			},
			onDetails(id, title, checked) {
				this.$refs.wanl_agree.show(id, title, checked)

			},
			onAgree(id) {
				if (id == this.$store.state.common.appConfig.user_agreement) {
					this.checked_01 = true
					if(!this.checked_02){
						console.log(this.$store.state.common.appConfig.privacy_protection);
						this.onDetails(this.$store.state.common.appConfig.privacy_protection, '隐私保护', this.checked_02)
					}
					
				}
				
				
				
				if (id == this.$store.state.common.appConfig.privacy_protection) {
					this.checked_02 = true
				}
			},
			// 后续版本添加第三方API接口，自动获取银行，验证银行卡三要素
			confirm() {
				let data = this.bankData;
				if (!data.bankCode) {
					this.$wanlshop.msg('请选择银行卡');
					return;
				}
				if (!data.cardCode) {
					this.$wanlshop.msg('请选择账号');
					return;
				}
				if (!data.username) {
					this.$wanlshop.msg('请填写真实姓名');
					return;
				}
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!data.mobile || !myreg.test(data.mobile)) {
					this.$wanlshop.msg('请填写正确手机号');
					return;
				}
				this.$wanlshop.prePage().refreshList(data);
				this.$wanlshop.back(1);
			},
			bankChange(e) {
				this.index = e.detail.value;
				this.bankData.bankCode = this.bankList[e.detail.value].bankCode;
				this.bankData.bankName = this.bankList[e.detail.value].bankName;
			}
		}
	}
</script>

<style scoped>
	.picker .flex image {
		width: 40rpx;
		height: 40rpx;
	}

	.auth-clause {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #909090;
	}

	.auth-clause uni-checkbox {
		margin-right: 6rpx;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
	}

	.auth-clause-text text {
		margin: 0 10rpx;
		color: #ED6D0F;

	}

	uni-button[disabled]:not([type]),
	uni-button[disabled][type=default] {
		color: #ffffff;
		background-color: #f7f7f7;
	}
</style>